<template>
  <div id="party">
    <md-swiper class="banner-item" :autoplay="5000" transition="fade" ref="swiper">
      <md-swiper-item :key="index" v-for="(item, index) in banners">
        <img :src="item.thumb_imgae_file" alt />
      </md-swiper-item>
    </md-swiper>
    <div class="nav-tab">
      <div class="item" @click="noFunction">
        <img src="/static/images/party/person.png" alt="党员报道" />
        <span>党员报道</span>
      </div>
      <div class="item" @click="noFunction">
        <img src="/static/images/party/advice.png" alt="党建活动建议" />
        <span>党建活动建议</span>
      </div>
    </div>
    <div class="article-list-wrap" ref="wrapper">
      <div class="bscroll-container">
        <!-- 刷新提示信息 -->
        <div class="top-tip">
          <span class="refresh-hook">{{pulldownMsg}}</span>
        </div>
        <!-- 内容列表 -->
        <div class="content">
          <div
            v-for="(item,index) in list"
            :key="index"
            class="item-wrap"
            @click="navDetail(item.id)"
          >
            <div class="article-img">
              <img :src="item.thumb_imgae_file" alt="文章缩略图" />
            </div>
            <div class="article-info">
              <h2>{{item.title}}</h2>
              <p>{{item.content}}</p>
            </div>
          </div>
        </div>
        <!-- 底部提示信息 -->
        <div class="bottom-tip">
          <span class="loading-hook">{{pullupMsg}}</span>
        </div>
      </div>
    </div>
    <tabBar :currentIndex="currentIndex"></tabBar>
  </div>
</template>

<script>
import BScroll from "better-scroll";
import tabBar from "@/components/common/tabBar";
import https from "@/https";
import config from "@/config";
import { Toast, Icon, Swiper, SwiperItem } from "mand-mobile";
export default {
  components: {
    tabBar,
    [Icon.name]: Icon,
    [Swiper.name]: Swiper,
    [SwiperItem.name]: SwiperItem
  },
  name: "party",
  data() {
    return {
      pulldownMsg: "下拉刷新",
      pullupMsg: "加载更多",
      pn: 1, //页码
      currentIndex: 2, //tabbar 值
      defaultBanners: [{ thumb_imgae_file: "/static/images/party/banner.png" }],
      banners: [],
      list: [] //新闻数据
    };
  },

  methods: {
      // 日常维保
    noFunction() {
      Toast.info("该功能系统暂未启用");
      return;
    },
    // 初始化新闻列表
    getArticleListInit() {
      let params = {
        pn: 1,
        pagesize: 10
      };
      https
        .fetchPost(config.branchNew, params)
        .then(res => {
          if (res.data.code == 1) {
            let name = "https://g.sqyzdh.com";
            let banners = res.data.data.banner;
            if (banners.length != 0) {
              for (let i in banners) {
                banners[i].thumb_imgae_file =
                  name + banners[i].thumb_imgae_file;
              }
              this.banners = banners;
            } else {
              this.banners = this.defaultBanners;
            }
            let list = res.data.data.list;
            if (list.length != 0) {
              for (let i in list) {
                list[i].thumb_imgae_file = name + list[i].thumb_imgae_file;
              }
              this.list = list;
              //恢复刷新提示文本值
              this.pulldownMsg = "下拉刷新";
              //刷新列表后，重新计算滚动区域高度
              this.scroll.refresh();
            }
          } else {
            Toast.failed(res.data.msg);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 加载更多
    getMoreArticleList() {
      let pagesize = 10; //条数
      let pn = this.pn;
      pn++;
      let params = {
        pn,
        pagesize
      };
      https
        .fetchPost(config.branchNew, params)
        .then(res => {
          console.log(res.data);
          if (res.data.code == 1) {
            if (res.data.data.list.length != 0) {
              let name = "https://g.sqyzdh.com";
              let oldList = this.list;
              let newList = res.data.data.list;
              for (let i in newList) {
                newList[i].thumb_imgae_file =
                  name + newList[i].thumb_imgae_file;
              }
              this.list = oldList.concat(newList);
              this.pn = pn;
              //恢复文本值
              this.pullupMsg = "加载更多";
              this.scroll.refresh();
            } else {
              Toast.failed("没有更多咯");
            }
          } else {
            Toast.failed(res.data.msg);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 查看详情
    navDetail(id) {
      this.$router.push({
        path: "/partyDetail",
        query: { id: id }
      });
    }
  },
  created() {
    this.getArticleListInit();
    const that = this;
    this.$nextTick(() => {
      this.scroll = new BScroll(this.$refs.wrapper, {
        //初始化better-scroll
        probeType: 1, //1 滚动的时候会派发scroll事件，会截流。2滚动的时候实时派发scroll事件，不会截流。 3除了实时派发scroll事件，在swipe的情况下仍然能实时派发scroll事件
        click: true //是否派发click事件
      });
      // 滑动过程中事件
      this.scroll.on("scroll", pos => {
        if (pos.y > 30) {
          this.pulldownMsg = "释放立即刷新";
        }
      });
      //滑动结束松开事件
      this.scroll.on("touchEnd", pos => {
        //上拉刷新
        if (pos.y > 30) {
          this.getArticleListInit();
        } else if (pos.y < this.scroll.maxScrollY - 30) {
          //下拉加载
          this.pullupMsg = "加载中。。。";
          this.getMoreArticleList();
        }
      });
    });
  },
  mounted() {}
};
</script>

<style lang="scss" scoped>
#party {
  .banner-item {
    position: fixed;
    top: 0;
    display: flex;
    justify-content: center;
    width: 100%;
    height: 300px;
    overflow: hidden;
    z-index: 98;
    background: #999;
    .md-swiper-item {
      text-align: center;
      img {
        height: 300px;
      }
    }
  }
  .nav-tab {
    position: fixed;
    top: 300px;
    display: flex;
    justify-content: center;
    width: 730px;
    padding: 20px 10px 20px;
    z-index: 98;
    background: #f8f8f8;
    .item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 50%;
      height: 200px;
      background: #fff;
      margin: 0 10px;
      border-radius: 20px;
      box-shadow: 0 2px 16px #e0e0e0;
      img {
        width: 60px;
        height: 60px;
        margin-bottom: 20px;
      }
      span {
        font-size: 24px;
        color: #333;
      }
    }
  }
  .article-list-wrap {
    background: #fff;
    padding: 0 30px 0;
    width: 690px;
    height: 100vh;
    .item-wrap {
      display: flex;
      border-bottom: 1px solid #eee;
      padding: 20px 0;
      .article-img {
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        width: 150px;
        height: 150px;
        margin-right: 20px;
        border-radius: 8px;
        img {
          height: 150px;
        }
      }
      .article-info {
        display: flex;
        flex-direction: column;
        width: 500px;
        h2 {
          height: 60px;
          line-height: 60px;
          font-size: 34px;
          color: #333;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        p {
          font-size: 24px;
          color: #999;
          line-height: 46px;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }
      }
    }
  }
  .bscroll-container {
    padding-bottom: 100px;
    padding-top: 540px;
  }
  .top-tip {
    position: absolute;
    top: 500px;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-size: 28px;
    text-align: center;
    color: #ccc;
  }
  .bottom-tip {
    width: 100%;
    height: 35px;
    line-height: 35px;
    text-align: center;
    color: #999;
    font-size: 28px;
    position: absolute;
    bottom: 35px;
    left: 0;
  }
}
</style>
